/**
 * Copyright (c) Enalean, 2014 - 2017. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

// scss-lint:disable NestingDepth, ImportantRule
.item-labels-box-select2 {
    &.select2-container-disabled > .select2-choices {
        padding: 2px 0;

        > .select2-search-field {
            display: none;
        }

        > .select2-search-choice {
            position: relative;

            &::before {
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
                font-family: 'FontAwesome';
                font-size: 12px;
                content: '\f02b'; // tag
            }
        }
    }

    &.select2-container-active > .select2-choices {
        transition: border-color 150ms;
        border-color: $main;
        box-shadow: none;

        > .select2-search-field::after {
            display: none;
        }
    }

    &.select2-dropdown-open > .select2-choices {
        border-radius: 3px 3px 0 0;
        border-color: $main;
        box-shadow: none;

        > .select2-search-field::after {
            display: none;
        }
    }

    > .select2-choices {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding: 2px 5px 2px 0;
        border-radius: 3px;
        border-color: transparent;
        background: 0;

        > .select2-search-field {
            position: relative;
            cursor: pointer;

            &::after {
                position: absolute;
                top: 50%;
                left: 8px;
                transform: translateY(-50%);
                color: #888888;
                font-family: 'FontAwesome';
                font-size: 12px;
                content: '\f067'; // plus
                cursor: pointer;
            }

            &:only-child {
                &::after {
                    right: 0;
                    left: auto;
                    content: '\f02c'; // tags
                }

                > .select2-input {
                    width: 200px !important;
                    padding: 5px 20px 5px 5px;
                    text-align: right;
                    cursor: pointer;
                    opacity: 1;

                    &.select2-focused {
                        text-align: left;
                    }
                }
            }

            > .select2-input {
                opacity: 0;

                &.select2-default {
                    padding: 5px 5px 5px 28px;
                }

                &.select2-active {
                    background: transparent !important;
                    opacity: 1;
                }

                &.select2-focused {
                    min-width: 200px !important;
                    opacity: 1;
                }
            }
        }

        .select2-search-choice {
            flex: 0 0 auto;
            padding: 6px 10px 6px 25px;
            border: 1px solid $main;
            border-radius: 14px;
            color: $white;
            font-size: 12px;
            font-weight: 600;
            line-height: 12px;
            box-shadow: none;

            > .select2-search-choice-close {
                top: 5px;
                left: 10px;
                background: none;

                &::after {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    color: $white;
                    font-family: 'FontAwesome';
                    font-size: 12px;
                    content: '\f02b'; // tag
                }

                &:hover {
                    text-decoration: none;
                }
            }

            &:hover > .select2-search-choice-close::after {
                content: '\f057'; // cross
            }
        }
    }

    .select2-search-choice {
        @for $i from 1 through length($swatch-color-names) {
            &.select-item-label-color-#{nth($swatch-color-names, $i)} {
                border-color: nth($swatch-color-primaries, $i);
                background: nth($swatch-color-primaries, $i);

                &.select-item-label-outline {
                    background: transparent;
                    color: nth($swatch-color-primaries, $i);

                    > .select2-search-choice-close {
                        &::after {
                            color: nth($swatch-color-primaries, $i);
                        }
                    }
                }
            }
        }
    }
}

.select-item-label-bullet {
    margin: 0 5px 0 0;
}

.item-labels-box-select2-results > .select2-results {
    margin: 0;
    padding: 0;

    > .select2-ajax-error,
    > .select2-searching {
        padding: 6px 10px;
        background: transparent;
        color: #888888;
        font-size: 14px;
        line-height: normal;
    }

    > .select2-result {
        padding: 6px 10px;
        font-size: 14px;
        line-height: normal;

        @for $i from 1 through length($swatch-color-names) {
            &.select-item-label-color-#{nth($swatch-color-names, $i)} {
                color: nth($swatch-color-primaries, $i);
            }
        }

        &.select2-highlighted {
            background: $main;

            @for $i from 1 through length($swatch-color-names) {
                &.select-item-label-color-#{nth($swatch-color-names, $i)} {
                    background: nth($swatch-color-primaries, $i);
                    color: $white;
                }
            }
        }
    }
}
